<template>
    <!-- 表单 -->
    <el-form inline>
        <el-form-item label="标题或内容" style="width: 20%;">
            <el-input v-model="params.title" placeholder="请输入要搜索的标题" />
        </el-form-item>
        <!-- <el-form-item label="内容" style="width: 20%;">
            <el-input v-model="params.content" placeholder="请输入要搜索的内容" />
        </el-form-item> -->
        <el-form-item label="状态" style="width: 20%;">
            <el-select v-model="params.status" placeholder="请选择状态" clearable>
                <!-- <el-option label="全部" value="" /> -->
                <el-option label="待发布" :value="0" />
                <el-option label="已发布" :value="1" />
                <el-option label="已下架" :value="2" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button @click="onSearch" plain>搜索</el-button>
            <el-button @click="onReset" plain type="info">重置</el-button>
            <el-button @click="onAddAnnouncement" plain type="success">新增</el-button>
        </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table height="526px" :data="announcementList">
        <el-table-column align="center" prop="announcementId" label="公告id" />
        <el-table-column align="center" prop="title" label="标题" />
        <!-- <el-table-column align="center" prop="creatorName" label="创建人" /> -->
        <el-table-column align="center" prop="createTime" label="创建时间" />
        <el-table-column align="center" label="状态">
            <template #default="{ row }">
                <el-tag 
                    :type="row.status === 0 ? 'info' : row.status === 1 ? 'success' : 'danger'"
                >
                    {{ row.status === 0 ? '待发布' : row.status === 1 ? '已发布' : '已下架' }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" fixed="right">
            <template #default="{ row }">
                <!-- 待发布状态显示发布、编辑和删除按钮 -->
                <template v-if="row.status === 0">
                    <el-button type="text" @click="onPublish(row.announcementId)">发布</el-button>
                    <el-button type="text" @click="onEdit(row.announcementId)">编辑</el-button>
                    <el-button type="text" class="red" @click="onDelete(row.announcementId)">删除</el-button>
                </template>
                <!-- 已发布状态显示下架按钮 -->
                <template v-else-if="row.status === 1">
                    <el-button type="text" @click="onUnpublish(row.announcementId)">下架</el-button>
                </template>
                <!-- 已下架状态显示编辑和删除按钮 -->
                <template v-else>
                    <el-button type="text" @click="onPublish(row.announcementId)">上架</el-button>
                    <el-button type="text" @click="onEdit(row.announcementId)">编辑</el-button>
                    <el-button type="text" class="red" @click="onDelete(row.announcementId)">删除</el-button>
                </template>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination background size="small" layout="total, sizes, prev, pager, next, jumper" :total="total"
        v-model:current-page="params.pageNum" v-model:page-size="params.pageSize" :page-sizes="[5, 10, 20, 50]"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <announcement-drawer ref="announcementEditRef" @success="onSuccess"></announcement-drawer>
</template>

<script setup>
import { reactive, ref} from 'vue';
import { getAnnouncementListService, delAnnouncementService, publishAnnouncementService, unpublishAnnouncementService } from '@/apis/announcement'
import AnnouncementDrawer from "@/components/drawer/AnnouncementDrawer.vue"
import { ElMessage } from 'element-plus';

const params = reactive({
    pageNum: 1,
    pageSize: 10,
    title: '',
    content: '',
    status: ''
})

const announcementEditRef = ref()
const announcementList = ref([])
const total = ref(0)

async function getAnnouncementList() {
    const ref = await getAnnouncementListService(params)
    announcementList.value = ref.rows
    total.value = ref.total
}
getAnnouncementList()

function onSearch() {
    params.pageNum = 1
    getAnnouncementList()
}

function onReset() {
    params.pageNum = 1
    params.pageSize = 10
    params.title = ''
    params.content = ''
    params.status = ''
    getAnnouncementList()
}

function handleSizeChange(newSize) {
    params.pageNum = 1
    getAnnouncementList()
}

function handleCurrentChange(newPage) {
    getAnnouncementList()
}


// 添加教师
const onAddAnnouncement = () => {
    announcementEditRef.value.open()
}


function onSuccess(service) {
    if (service === 'add') {
        params.pageNum = 1
    }
    getAnnouncementList()
}

async function onDelete(announcementId) {
    const isConfirmed = window.confirm("确定要删除该精品课程吗？");
    if (isConfirmed) {
        // 用户点击确认
        await delAnnouncementService(announcementId);
        params.pageNum = 1;
        getAnnouncementList();
    } else {
        // 用户点击取消
        console.log("删除操作已取消");
    }
}
async function onEdit(announcementId) {
    announcementEditRef.value.open(announcementId)
}

async function onPublish(announcementId) {
    try {
        await publishAnnouncementService(announcementId);
        ElMessage.success('发布成功');
        getAnnouncementList();
    } catch (error) {
        ElMessage.error('发布失败');
    }
}

async function onUnpublish(announcementId) {
    try {
        await unpublishAnnouncementService(announcementId);
        ElMessage.success('下架成功');
        getAnnouncementList();
    } catch (error) {
        ElMessage.error('下架失败');
    }
}
</script>